
import { Dropdown, Menu, Avatar, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useMemo } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { imgUrlDev } from '../../../../assets/js/tools';
import { getUpdateGroupAdmin } from '../../../../assets/js/api';
import {
    member_list,
    member_list_title,
    member_list_title_top,
    member_admins_num,
    member_list_title_item,
    member_list_title_avator,
    member_list_title_bottom,
    member_list_list,
    member_list_item,
    member_list_item_item,
    member_list_item_avator,
    member_list_item_type,
    admin,
    creator,
} from './index.module.css'
import { publish } from 'pubsub-js';
import { memberRefresh } from '../../../../event-type';


function GroupMember(props) {
    
    const {members, adminsNum, group_id, user} = props;

    const memberSortList = useMemo(() => {
        // 排序组员,群主第一随后管理
        const creator = [];
        const admin = [];
        const people = [];
        for (let i = 0; i < members.length; i++) {
            if (members[i].member_type === '3') {
                creator.push(members[i]);
                continue;
            }
            if (members[i].member_type === '2') {
                admin.push(members[i]);
                continue;
            }
            if (members[i].member_type === '1') {
                people.push(members[i]);
                continue;
            }
        }
        return creator.concat(admin, people);
    }, [members]);


    function formatDate(datetime) {
        const time = new Date(datetime);
        return `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`
    }
    function setUpAdmin(target_id) {
        return () => {
            if (adminsNum >= 5) {
                message.open({type:'warning', content: '以达到管理员数目上限'});
                return;
            }
            getUpdateGroupAdmin({group_id,target_id,user_id: user.id,set_type: 'set'})
            .then(res => {
                const {code, message:content} = res.data;
                if (code !== 1) {
                    console.log(res.data)
                    message.open({type: 'error', content});
                    return;
                }
                publish(memberRefresh);
            })
            .catch(err => {
                console.log(err);
                message.open({type: 'error', content:err.message});
            });
        }
    }
    function cancelAdmin(target_id) {
        return () => {
            getUpdateGroupAdmin({group_id,target_id,user_id: user.id,set_type: 'cancel'})
            .then(res => {
                const {code, message:content} = res.data;
                if (code !== 1) {
                    console.log(res.data)
                    message.open({type: 'error', content});
                    return;
                }
                publish(memberRefresh);
            })
            .catch(err => {
                console.log(err);
                message.open({type: 'error', content:err.message});
            });
        }
    }
    function rightClickMenu(item) {
        return () => {
            return (
                <Menu style={{ width: 160 }}>
                    <Menu.Item key="info">
                        <Link to={{pathname: `/info/${item.user_id}`}} target="_blank">查看资料</Link>
                    </Menu.Item>
                    {
                        members.find(item => {
                            if (item.user_id === user.id && item.member_type === '3') {
                                return true;
                            }
                            return false;
                        }) ?
                            item.member_type === '1' ?
                                <Menu.Item key="admin">
                                    <span onClick={setUpAdmin(item.user_id)}>设置为管理员</span>
                                </Menu.Item> :
                                <Menu.Item key="admin">
                                    <span onClick={cancelAdmin(item.user_id)}>取消管理员</span>
                                </Menu.Item>
                            : 
                            ''
                    }
                </Menu>
            )
        }
    }


    return (
        <div className={member_list}>
            <div className={member_list_title}>
                <div className={member_list_title_top}>
                    <span className={member_admins_num}>管理员 {adminsNum}/5</span>
                </div>
                <div className={member_list_title_bottom}>
                    <span className={`${member_list_title_item} ${member_list_title_avator}`}>成员</span>
                    <span className={member_list_title_item}>名称</span>
                    <span className={member_list_title_item}>入群时间</span>
                </div>
            </div>
            <div className={member_list_list}>
                {
                    memberSortList.map(item => (
                        <Dropdown overlay={rightClickMenu(item)} trigger={['contextMenu']} key={item.user_id}>
                            <div className={member_list_item}>
                                <span className={`${member_list_item_item} ${member_list_item_avator}`}>
                                    <Avatar src={imgUrlDev(item.user_avator)} size={24} />
                                </span>
                                <span className={`${member_list_item_item}`}>{item.user_name}</span>
                                <span className={`${member_list_item_item}`}>{formatDate(item.join_time)}</span>
                                <span className={`${member_list_item_item}`}></span>
                                <span style={{visibility: item.member_type==='1'?'hidden':'visible'}} className={`${member_list_item_item} ${member_list_item_type} ${item.member_type === '2' ? admin : item.member_type === '3' ? creator : ''}`}>
                                    <UserOutlined />
                                </span>
                            </div>
                        </Dropdown>
                    ))
                }
            </div>
        </div>
    )
}

function mapStateToProps(state) {
    return {
        user: state.user
    }
}
export default connect(
    mapStateToProps,
    {

    }
)(GroupMember);

